<template>
  <div>
    <HeadNavTwo>店铺详情</HeadNavTwo>
    <!-- 建筑 -->
    <table class="architecture">
      <thead class="title">
        建筑风格
      </thead>
      <tr>
        <td>
          产
          <p class="nbsp"></p>
          权:
        </td>
        <td>{{itemData.cq}}年</td>
      </tr>
      <tr>
        <td>建筑面积:</td>
        <td>{{itemData.area}}㎡</td>
      </tr>
      <tr>
        <td>门头高度:</td>
        <td>{{itemData.mtgd}}m</td>
      </tr>
      <tr>
        <td>
          进
          <p class="nbsp"></p>
          深:
        </td>
        <td>{{itemData.js}}m</td>
      </tr>
      <tr>
        <td>是否分割:</td>
        <td>{{itemData.sffg}}</td>
      </tr>
      <tr>
        <td>使用面积:</td>
        <td>{{itemData.area}}㎡</td>
      </tr>
      <tr>
        <td>面<p class="nbsp"></p>宽:</td>
        <td>{{itemData.mk}}㎡</td>
      </tr>
      <tr>
        <td>层<p class="nbsp"></p>高:</td>
        <td>{{itemData.cg}}层</td>
      </tr>
      <tr>
        <td>无遮挡程度:</td>
        <td>{{itemData.wzdcd}}</td>
      </tr>
    </table>
    <!-- 配套设施 -->
    <div class="f-top">
      <h2 class="title">配套设施</h2>
      <div class="img">
        <img src="../../assets/images/slt.png" alt="" />
        <p>上水</p>
      </div>
      <div class="img">
        <img src="../../assets/images/slt.png" alt="" />
        <p>下水</p>
      </div>
    </div>
    <!-- 经营情况 -->
    <table class="manage">
      <thead class="title">
        经营情况
      </thead>
      <tr>
        <td>经营状态:</td>
        <td>{{itemData.jy}}</td>
      </tr>
      <tr>
        <td>品牌情况:</td>
        <td>{{itemData.ppqk}}</td>
      </tr>
    </table>
    <!-- 租赁情况 -->
    <table class="lease">
      <thead class="title">
        租赁情况
      </thead>
      <tr>
        <td>租金递增:</td>
        <td>{{itemData.zjdz}}</td>
      </tr>
      <tr>
        <td>支付方式:</td>
        <td>{{itemData.zffs}}</td>
      </tr>
      <tr>
        <td>当前租约:</td>
        <td>10</td>
      </tr>
      <tr>
        <td>剩余租约:</td>
        <td>10</td>
      </tr>
      <tr>
        <td>最长租期:</td>
        <td>3年</td>
      </tr>
      <tr>
        <td>续约情况:</td>
        <td>可续约</td>
      </tr>
    </table>
    <!-- 专家点评 -->
    <div class="expert">
      <h2 class="title">专家点评</h2>
      <div class="text">{{itemData.desc}}</div>
    </div>
  </div>
</template>

<script>
import HeadNavTwo from "../../components/HeadNavTwo";
import {mapState,mapMutations} from "vuex"
export default {
  name: "StoreDetails",
  data(){
    return{
      itemData:{}
    }
  },
  components: {
    HeadNavTwo,
  },
  computed:{
    ...mapState('storeModule',{
      info:state=>state.info
    })
  },
  methods: {
    ...mapMutations('storeModule',['setInfo']),
  },
  mounted(){

    this.setInfo(this.$route.params.id)
    // console.log(this.$route.params.id);
    this.itemData = this.info
    //console.log(this.itemData);
    console.log(this.itemData);

    //刷新保存
    const getItem = JSON.parse(localStorage.getItem('storeData'))
    // console.log(getItem);
    this.itemData = getItem
  }
};
</script>

<style lang="less" scoped>
.architecture {
  padding: 10px;
  box-sizing: border-box;

  .nbsp {
    display: inline-block;
    width: 24px;
  }
}
// 公共使用
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
}
td {
  height: 25px;
  line-height: 25px;
}
// 配套设施
.f-top {
  width: 100%;
  height: 120px;
  //   padding: 10px 10px;
  //   box-sizing: border-box;
  .img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float: left;
    padding: 10px;
    img {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;
    }
    p {
      font-size: 12px;
    }
  }
}
//租赁情况
.lease {
  padding: 10px;
}
// 经营情况
.manage {
  padding: 10px;
}
// 专家点评
.expert {
  padding: 10px 10px 20px 0;
  .text{
      padding: 0 10px;
      overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  }
}
</style>